<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图· -->
        <el-card>
            <el-button type="primary" class="button" @click="showAddCateDialog">添加分类</el-button>

                    <!-- 表格 -->
                    <tree-table
                        :selection-type="false"
                        :data="cateList"
                        :columns="columns"
                        :expand-type="false"
                        :show-index="true"
                        index-text="#"
                        :border="true"
                        :show-row-hover="false"
                    >

                    <!-- 是否有效 -->
                        <template slot="isok" slot-scope="scope">
                            <i class="el-icon-success" v-if='scope.row.cat_deleted === false' style="color:lightgreen;"></i>
                            <i class="el-icon-error" style="color:red;" v-else></i>
                        </template>

                    <!-- 排序 -->
                    <template slot="order" slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.cat_level == 0">一级</el-tag>
                        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level == 1">二级</el-tag>
                        <el-tag type="warning" size="mini" v-else>三级</el-tag>
                    </template>

                    <!-- 操作 -->

                    <template slot="opt" slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click="BianCate(scope.row.cat_id)" size="mini">编辑</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="ShanFen(scope.row.cat_id)" size="mini">删除</el-button>
                    </template>
                    </tree-table>
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.total">
            </el-pagination>
        </el-card>

        <!-- 添加分类对话框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addCateVisible"
            width="50%"
            @close="addClosed()"
        >
            <el-form :model="CateruleForm" :rules="Caterules" ref="CateruleForm" label-width="100px">
                <el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="CateruleForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader
                        clearable
                        v-model="selectKeys"
                        :options="parentCateList"
                        :props="cascaderProps"
                        @change="PrentCteChange">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑对话框 -->
        <el-dialog
            title="提示"
            :visible.sync="ShelogVisible"
            width="50%">
            <el-input
                v-model="input"
                clearable>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ShelogVisible = false">取 消</el-button>
                <el-button type="primary" @click="jiCate()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //商品分类数据列表 ，默认为空
            cateList:[],

            //查询条件
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            //总数据条数
            total:0,
            //为table指定列的定义
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name'
                },

                //是否有效
                {   
                    
                    label:"是否有效",
                    
                    //表示将当前列为模板列
                    type:'template',
                    //表示当前列使用的模板名称
                    template:'isok'
                },

                //排序
                {   
                    label:"排序",
                    
                    //表示将当前列为模板列
                    type:'template',
                    //表示当前列使用的模板名称
                    template:'order'
                },

                //操作
                {   
                    label:"操作",
                    
                    //表示将当前列为模板列
                    type:'template',
                    //表示当前列使用的模板名称
                    template:'opt'
                }
            ],
            addCateVisible:false,
            //添加分类的表单数据对象
            CateruleForm:{
                cat_name:'',
                cat_pid:0,
                cat_level:0
            },
            //添加规则
            Caterules:{
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            //父级分类列表
            parentCateList:[],
            cascaderProps:{
                expandTrigger: 'hover',
                 value:'cat_id', 
                 label:'cat_name' , 
                 children:'children'
            },
            //选中的父级分类的Id数组
            selectKeys:[],
            ShelogVisible:false,
            input:'',
            //编辑提交的id
            id:''
        }
    },
    methods: {

        //获取商品管理列表
        async getCateList(){
            const { data } = await this.axios.get('categories',{params:this.queryInfo})
            //console.log(data)

            //把数据列表，赋值给cateList
            this.cateList = data.data.result

            //为总数据条数赋值
            this.total = data.data.total
        },

        //监听 pagesize 改变
        handleSizeChange(val){
            this.queryInfo.pagesize = val;
            this.getCateList()
        },
        
        //监听 pagenum 的改变
        handleCurrentChange(val){
            this.queryInfo.pagenum = val;
            this.getCateList()
        },
        //点击按钮，展示添加分类的对话框
        showAddCateDialog(){

            this.addCateList()
            this.addCateVisible = true
        },
        async addCateList(){
            const { data } = await this.axios.get('categories',{type:2})
            this.parentCateList=data.data
            //console.log(data)
        },
        PrentCteChange(){
            if(this.selectKeys.length>0){
                this.CateruleForm.cat_pid = this.selectKeys[this.selectKeys.length-1]
                this.CateruleForm.cat_level = this.selectKeys.length
                return

            }else{
                this.CateruleForm.cat_pid = 0
                this.CateruleForm.cat_level = 0
            }
        },
        //点击按钮添加新的分类
        addCate(){

            this.$refs.CateruleForm.validate(async valid=>{
                if(!valid)return
                const { data } = await this.axios.post('categories',this.CateruleForm)
                //console.log(data)
                this.getCateList()
                this.$message.success('添加分类成功！')
            })
            
            this.addCateVisible = false
            //console.log(this.CateruleForm)
        },
        //监听对话框的关闭事件，重置表单数据
        addClosed(){
            this.$refs.CateruleForm.resetFields()
            this.selectKeys=[]
            this.CateruleForm.cat_pid=0
            this.CateruleForm.cat_level=0
        },
        //查询分类
        async BianCate(val){
            const { data } = await this.axios('categories/'+val)
            this.input = data.data.cat_name
            this.id = data.data.cat_id
            //console.log(data)
            this.ShelogVisible=true
        },
        //点击确定编辑提交分类
        async jiCate(){

            const { data } = await this.axios.put(`categories/${this.id}`,{cat_name:this.input})
            console.log(data)
            this.getCateList()
            this.$message.success('数据修改成功')
            this.ShelogVisible = false
        },
        //删除分类
        async ShanFen(id){
            const data1 = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err=>err)
            if(data1 == 'confirm'){
                const { data } = await this.axios.delete('categories/'+id)
                console.log(data)
                this.$message.success('删除分类成功！')
                this.getCateList()
            }else{
                this.$message.info('已取消删除')
            }
        }
    },
    created() {
        //获取商品分类数据
        this.getCateList()
    },
}
</script>
<style lang="less" scoped>
    .button{
        margin-top: 5px;
        margin-bottom: 15px;
    }
    .el-cascader{
        width: 100%;
    }
</style>